dha-assets
Advanced tools
This module is used for image and audio assets.
Install from npm:
Background Props:
Image Props:
Disclaimer: For this demo code to work with imported images in JS and from the public folder options, add and/or replace dha-logo.png and dha-splash.png with your own image files.
Add and/or Replace Image Files in Application:
This package provides built-in images so this step is optional and isn't necessary for the package to work. If you want to use your own local asset files with this package there are a couple of ways to do this in create-react-app, see Option 1 and Option 2.
Option 1: Import Assets in JS Using Relative Path.
Relative folder (./src/assets) - Add audio and/or image files to a relative folder from source. Change the path and folder name to your application structure and adjust the import path when importing the asset.
react-app-env.d.ts (Audio Only) - Append the following line to the end of file and duplicate for all audio file extensions that are being used. Prepending this line to the start of file will throw an error.
/// <reference types="react-scripts" />
// Append the following line and any additional audio extensions
declare module '*.mp3';
Importing Assets in JS Example:
Disclaimer: This is a non-compilable example. For a compilable working example, see the full functional and class component examples below.
// Audio
import audioMp3 from '../assets/audio/audio.mp3';
createAudio('audioMp3', audioMp3);
// Image
import imagePng from '../assets/images/image.png';
<Background alt="Image alt" image={imagePng} scale={1} styles={styles.background} />;
<Image alt="Image alt" maxWidth="250px" src={imagePng} styles={styles.image} />;
Option 2: CRA Public Folder Assets - NOT Recommended
Public folder (./public) - Add audio and/or image files to CRA public folder. Create your own folder structure and adjust the path when using the asset.
Using CRA Public Folder Example:
Disclaimer: This is a non-compilable example. For a compilable working example, see the full functional and class component examples below.
// Audio
createAudio('audioMp3', 'assets/audio/audio.mp3');
// Image
<Background alt="Image alt" image="assets/images/image.png" scale={1} styles={styles.background} />;
<Image alt="Image alt" maxWidth="250px" src="assets/images/image.png" styles={styles.image} />;
Home.tsx - Functional component - Image Demo
import { Grid, Typography } from '@material-ui/core';
import { Background, Image } from 'dha-assets';
import React from 'react';
import dHALogoRelAssets from '../../assets/images/dha-logo.png';
import dHASplashRelAssets from '../../assets/images/dha-splash.png';
const styles: { image: object } = {
image: {
borderStyle: 'solid',
},
};
const Home: React.FC = () => {
return (
<Grid container={true} spacing={2}>
<Grid item={true} xs={12}>
<Typography variant="h5">Option 1: Built-In Image</Typography>
</Grid>
<Grid item={true} xs={6}>
<Background alt="DHA logo" name="dha-logo" scale={1} styles={styles.image}>
<Typography>Add nested div or React component (optional)</Typography>
</Background>
</Grid>
<Grid item={true} xs={6}>
<Image alt="DHA splash" maxWidth="250px" name="dha-splash" styles={styles.image} />
</Grid>
<Grid item={true} xs={12}>
<Typography variant="h5">Option 2: Import Image in JS Using Relative Path</Typography>
</Grid>
<Grid item={true} xs={6}>
<Background alt="DHA logo" src={dHALogoRelAssets} scale={1} styles={styles.image}>
<Typography>Add nested div or React component (optional)</Typography>
</Background>
</Grid>
<Grid item={true} xs={6}>
<Image alt="DHA splash" maxWidth="250px" src={dHASplashRelAssets} styles={styles.image} />
</Grid>
<Grid item={true} xs={12}>
<Typography variant="h5">Option 3: Hosted Image</Typography>
</Grid>
<Grid item={true} xs={6}>
<Background
alt="Placeholder Background Component"
src="https://via.placeholder.com/250"
scale={1}
styles={styles.image}
>
<Typography>Add nested div or React component (optional)</Typography>
</Background>
</Grid>
<Grid item={true} xs={6}>
<Image
alt="Placeholder Image Component"
maxWidth="250px"
src="https://via.placeholder.com/250"
styles={styles.image}
/>
</Grid>
<Grid item={true} xs={12}>
<Typography variant="h5">Option 4: CRA Public Folder Image - NOT Recommended</Typography>
</Grid>
<Grid item={true} xs={6}>
<Background alt="DHA logo" src="dha-logo.png" scale={1} styles={styles.image}>
<Typography>Add nested div or React component (optional)</Typography>
</Background>
</Grid>
<Grid item={true} xs={6}>
<Image alt="DHA splash" maxWidth="250px" src="dha-splash.png" styles={styles.image} />
</Grid>
</Grid>
);
};
export default Home;
Home.tsx - Class component - Image Demo
import { Grid, Typography } from '@material-ui/core';
import { Background, Image } from 'dha-assets';
import React from 'react';
import dHALogoRelAssets from '../../assets/images/dha-logo.png';
import dHASplashRelAssets from '../../assets/images/dha-splash.png';
const styles: { image: object } = {
image: {
borderStyle: 'solid',
},
};
class Home extends React.Component {
render() {
return (
<Grid container={true} spacing={2}>
<Grid item={true} xs={12}>
<Typography variant="h5">Option 1: Built-In Image</Typography>
</Grid>
<Grid item={true} xs={6}>
<Background alt="DHA logo" name="dha-logo" scale={1} styles={styles.image}>
<Typography>Add nested div or React component (optional)</Typography>
</Background>
</Grid>
<Grid item={true} xs={6}>
<Image alt="DHA splash" maxWidth="250px" name="dha-splash" styles={styles.image} />
</Grid>
<Grid item={true} xs={12}>
<Typography variant="h5">Option 2: Import Image in JS Using Relative Path</Typography>
</Grid>
<Grid item={true} xs={6}>
<Background alt="DHA logo" src={dHALogoRelAssets} scale={1} styles={styles.image}>
<Typography>Add nested div or React component (optional)</Typography>
</Background>
</Grid>
<Grid item={true} xs={6}>
<Image alt="DHA splash" maxWidth="250px" src={dHASplashRelAssets} styles={styles.image} />
</Grid>
<Grid item={true} xs={12}>
<Typography variant="h5">Option 3: Hosted Image</Typography>
</Grid>
<Grid item={true} xs={6}>
<Background
alt="Placeholder Background Component"
src="https://via.placeholder.com/250"
scale={1}
styles={styles.image}
>
<Typography>Add nested div or React component (optional)</Typography>
</Background>
</Grid>
<Grid item={true} xs={6}>
<Image
alt="Placeholder Image Component"
maxWidth="250px"
src="https://via.placeholder.com/250"
styles={styles.image}
/>
</Grid>
<Grid item={true} xs={12}>
<Typography variant="h5">Option 4: CRA Public Folder Image - NOT Recommended</Typography>
<Typography>Add images to public folder and add file path/name to src prop.</Typography>
</Grid>
<Grid item={true} xs={6}>
<Background alt="DHA logo" src="dha-logo.png" scale={1} styles={styles.image}>
<Typography>Add nested div or React component (optional)</Typography>
</Background>
</Grid>
<Grid item={true} xs={6}>
<Image alt="DHA splash" maxWidth="250px" src="dha-splash.png" styles={styles.image} />
</Grid>
</Grid>
);
}
}
export default Home;
Disclaimer: For this demo code to work with imported audio in JS and from the public folder options, add and/or replace exhale.mp3 and inhale.mp3 with your own audio files.
Add and/or Replace Audio Files in Application:
react-app-env.d.ts (Audio Only) - Append the following line to the end of file and duplicate for all audio file extensions that are being used. Prepending this line to the start of file will throw an error.
/// <reference types="react-scripts" />
// Append the following line and any additional audio extensions
declare module '*.mp3';
Home.tsx - Functional component - Audio Demo
import { Grid, Typography } from '@material-ui/core';
import { audioFiles, createAudio, pauseAudio, playAudio, stopAudio } from 'dha-assets';
import React from 'react';
import exhaleRelAssets from '../../assets/audio/exhale.mp3';
import inhaleRelAssets from '../../assets/audio/inhale.mp3';
const Home: React.FC = () => {
createAudio('exhaleRelAssets', exhaleRelAssets);
createAudio('inhaleRelAssets', inhaleRelAssets);
createAudio('pianoURL', 'http://www.kozco.com/tech/piano2.wav');
createAudio('inhalePublic', 'exhale.mp3');
createAudio('exhalePublic', 'inhale.mp3');
const pauseRelAssets = () => {
pauseAudio('exhaleRelAssets');
pauseAudio('inhaleRelAssets');
};
const playRelAssets = () => {
playAudio('exhaleRelAssets');
playAudio('inhaleRelAssets');
};
const stopRelAssets = () => {
stopAudio('exhaleRelAssets');
stopAudio('inhaleRelAssets');
};
const pauseURL = () => {
pauseAudio('pianoURL');
};
const playURL = () => {
playAudio('pianoURL');
};
const stopURL = () => {
stopAudio('pianoURL');
};
const pausePublic = () => {
pauseAudio('exhalePublic');
pauseAudio('inhalePublic');
};
const playPublic = () => {
playAudio('exhalePublic');
playAudio('inhalePublic');
};
const stopPublic = () => {
stopAudio('exhalePublic');
stopAudio('inhalePublic');
};
return (
<Grid container={true} spacing={2}>
<Grid item={true} xs={12}>
<Typography>audioFiles: {JSON.stringify(audioFiles)}</Typography>
</Grid>
<Grid item={true} xs={12}>
<Typography>Option 1: Import Audio in JS Using Relative Path</Typography>
</Grid>
<Grid item={true} xs={12}>
<button onClick={playRelAssets}>Play</button>
<button onClick={pauseRelAssets}>Pause</button>
<button onClick={stopRelAssets}>Stop</button>
</Grid>
<Grid item={true} xs={12}>
<Typography>Option 2: Hosted Audio</Typography>
</Grid>
<Grid item={true} xs={12}>
<button onClick={playURL}>Play</button>
<button onClick={pauseURL}>Pause</button>
<button onClick={stopURL}>Stop</button>
</Grid>
<Grid item={true} xs={12}>
<Typography>Option 3: CRA Public Folder Image - NOT Recommended</Typography>
</Grid>
<Grid item={true} xs={12}>
<button onClick={playPublic}>Play</button>
<button onClick={pausePublic}>Pause</button>
<button onClick={stopPublic}>Stop</button>
</Grid>
</Grid>
);
};
export default Home;
Home.tsx - Class component - Audio Demo
import { Grid, Typography } from '@material-ui/core';
import { audioFiles, createAudio, pauseAudio, playAudio, stopAudio } from 'dha-assets';
import React from 'react';
import exhaleRelAssets from '../../assets/audio/exhale.mp3';
import inhaleRelAssets from '../../assets/audio/inhale.mp3';
class Home extends React.Component {
constructor(props: any) {
super(props);
createAudio('exhaleRelAssets', exhaleRelAssets);
createAudio('inhaleRelAssets', inhaleRelAssets);
createAudio('pianoURL', 'http://www.kozco.com/tech/piano2.wav');
createAudio('inhalePublic', 'exhale.mp3');
createAudio('exhalePublic', 'inhale.mp3');
}
pauseRelAssets = () => {
pauseAudio('exhaleRelAssets');
pauseAudio('inhaleRelAssets');
};
playRelAssets = () => {
playAudio('exhaleRelAssets');
playAudio('inhaleRelAssets');
};
stopRelAssets = () => {
stopAudio('exhaleRelAssets');
stopAudio('inhaleRelAssets');
};
pauseURL = () => {
pauseAudio('pianoURL');
};
playURL = () => {
playAudio('pianoURL');
};
stopURL = () => {
stopAudio('pianoURL');
};
pausePublic = () => {
pauseAudio('exhalePublic');
pauseAudio('inhalePublic');
};
playPublic = () => {
playAudio('exhalePublic');
playAudio('inhalePublic');
};
stopPublic = () => {
stopAudio('exhalePublic');
stopAudio('inhalePublic');
};
render() {
return (
<Grid container={true} spacing={2}>
<Grid item={true} xs={12}>
<Typography>audioFiles: {JSON.stringify(audioFiles)}</Typography>
</Grid>
<Grid item={true} xs={12}>
<Typography>Option 1: Import Audio in JS Using Relative Path</Typography>
</Grid>
<Grid item={true} xs={12}>
<button onClick={this.playRelAssets}>Play</button>
<button onClick={this.pauseRelAssets}>Pause</button>
<button onClick={this.stopRelAssets}>Stop</button>
</Grid>
<Grid item={true} xs={12}>
<Typography>Option 2: Hosted Audio</Typography>
</Grid>
<Grid item={true} xs={12}>
<button onClick={this.playURL}>Play</button>
<button onClick={this.pauseURL}>Pause</button>
<button onClick={this.stopURL}>Stop</button>
</Grid>
<Grid item={true} xs={12}>
<Typography>Option 3: CRA Public Folder Audio - NOT Recommended</Typography>
</Grid>
<Grid item={true} xs={12}>
<button onClick={this.playPublic}>Play</button>
<button onClick={this.pausePublic}>Pause</button>
<button onClick={this.stopPublic}>Stop</button>
</Grid>
</Grid>
);
}
}
export default Home;
The package uses the Typescript compiler (TSC) to build the source code. To build the project run the following command:
Note: You must tell the local dha-assets to use all peerDependencies from the app you are including the dha-assets into using npm link (the example below is for using the dha-assets in the pwa-starter).
See the dha-assets package.json peerDependencies section.
"peerDependencies": {
"@material-ui/core": "^X.X.X",
"@material-ui/icons": "^X.X.X",
"react": "^X.X.X",
"react-dom": "^X.X.X"
}
You can install the package into your own React application/pwa-starter as a dependency. After you build the dha-assets, install the package into the app using the following command:
Npm Install Issues
Hook Errors
npm test command.Example:
test('renders without crashing', () => {
shallow(<Demo prop1="1" prop2={2} />);
});
test('hello world string', () => {
expect(demo()).toMatch(`RENAME Demo files to start.`);
});
https://bitbucket.org/wmtp/dha-assets
https://www.npmjs.com/package/dha-assets
This project is licensed under the MIT License.
FAQs
DHA SDK assets
The npm package dha-assets receives a total of 4 weekly downloads. As such, dha-assets popularity was classified as not popular.
We found that dha-assets demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.
Security News
NIST's new password guidelines remove periodic changes and special character requirements, focusing on longer, more secure passwords for better authentication practices.